<template>
	<view class="engineering">
		<up-loadmore status="loading" v-if="isLoading" />
		<scroll-view scroll-y="true" class="scroll-Y" :show-scrollbar="false" v-else>
			<up-empty mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png" v-if="!lists || lists.length == 0">
			</up-empty>
			<view class="" v-else>
				<view class="item-container">
					<view class="item" v-for="item in lists" :key="item.id">
						<view class="item-top">
							<text>{{item.createTime}}</text>
							<text style="color: #0000ff" v-if="item.execStatus == 1">进行中</text>
							<text style="color: #00aa00" v-else-if="item.execStatus == 2">已提交</text>
							<text style="color: #FF8A00" v-else-if="item.execStatus == 3">待审批</text>
							<text style="color: #ff0000" v-else-if="item.execStatus == 4">驳回</text>
							<text style="color: #ff55ff" v-else-if="item.execStatus == 5">已维保</text>
							<text style="color: #28C445" v-else-if="item.execStatus == 6">已完成</text>
							<text style="color: #325EF5;" v-else>待开始</text>
						</view>
						<view class="item-name">
							{{item.clientName?item.clientName:'暂无公司'}}
						</view>
						<view class="item-address">
							{{item.clientAddress}}
						</view>
						<view class="item-time">
							<text>预约上门时间：</text>
							<text>{{item.planStartDate}}</text>
						</view>
						<view class="item-type">
							维保名目
						</view>
						<view>
							{{item.planName}}
						</view>
						<view class="item-btn">
							<button @click="overTaskHandler(item)">上传任务表单</button>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script setup>
	import {
		getEngineering,
	} from '@/api/inspection.js'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		ref,
		reactive,
		onMounted
	} from 'vue'
	let taskTabList = reactive([{
			id: 0,
			name: '全部',
			isChecked: true,
			execStatus: '',
		},
		{
			id: 1,
			name: '进行中',
			isChecked: false,
			execStatus: 1,
		},
		{
			id: 3,
			name: '待审批',
			isChecked: false,
			execStatus: 3,
		},
		{
			id: 6,
			name: '已完成',
			isChecked: false,
			execStatus: 6
		},
	])
	let isLoading = ref(false)
	let lists = reactive([])
	let params = reactive({
		execStatus: ''
	})
	onMounted(() => {})
	onLoad(e => {
		getTodayLists()
	})
	// 获取今日任务列表
	const getTodayLists = () => {
		isLoading.value = true
		getEngineering(params.execStatus).then(res => {
			if (res.code = 200) {
				lists.splice(0, lists.length, ...res.rows)
			}
			isLoading.value = false
		})
	}
	const overTaskHandler = item => {
		uni.navigateTo({
			url: `/pages/tasks/fire?itemId=${item.id}`
		})
	}
	const HandleReturn = () => {
		uni.navigateBack({
			delta: 1
		});
	}
</script>

<style lang="less" scoped>
	@import "@/App.less";

	.engineering {
		height: 100%;
		overflow: hidden;
	}

	.scroll-Y {
		padding: 10rpx 28rpx 40rpx 28rpx;
		height: 100vh;

		// height: 95vh;
		.item-container {

			.item {
				margin-bottom: 20rpx;
				height: 26vh;
				background-color: #fff;
				border-radius: 24rpx;
				padding: 20rpx;
				font-size: 24rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-around;

				.item-top {
					.inline_space_between();

					& text:nth-child(2) {
						font-size: 30rpx;
						color: #28C445;
						font-weight: bold;
					}
				}

				// &::after {
				// 	content: '';
				// 	width: 100%;
				// 	height: 10vh;
				// }

				.item-name,
				.item-type {
					font-size: 30rpx;
					color: #325EF5;
				}

				.item-time {
					.inline_space_between();

					text:nth-child(2) {
						color: #325EF5;
					}
				}

				.item-imgs {
					display: flex;

					image {
						width: 94rpx;
						height: 94rpx;
						margin-right: 16rpx;
					}
				}

				.item-btn {
					display: flex;
					justify-content: flex-end;


					button {
						margin: 0 20rpx;
						width: 240rpx;
						// height: 64rpx;
						border-radius: 12rpx;
						background-color: #325ef5;
						border: 1px solid #325ef5;
						color: #fff;
						font-size: 28rpx;
					}

					.change-ok {
						opacity: 0.5;
						width: 50%;
					}

					.check {
						background-color: #325ef5 !important;
						border: 1px solid #325ef5;
						color: #fff !important;
						font-size: 28rpx !important;

					}
				}

			}

			&::after {
				content: '--- 没有更多数据了 ---';
				display: block;
				width: 100%;
				height: 150rpx;
				text-align: center;
				opacity: 0.5;
				// margin-bottom: 50rpx;
			}
		}


	}
</style>